<template>
    <div>
        <!-- 将来,谁使用此轮播图组件,谁为我们传递 lunbotuList -->
        <!-- 此时,lunbotuList应该是 父组件向子组件传值来设置 -->
        <mt-swipe :auto="2000">
            <mt-swipe-item v-for="(item, i) in lunbotuList" :key="i">
                <img :src="item.img" alt="" :class="{'full': isfull}">
            </mt-swipe-item>
        </mt-swipe>

    </div>


    <!--
        1.首页中的图片,它的宽高,都是使用了100%的宽度
        2.在商品详情页面中,期望高度是100%,但是宽度为 自适应
        3.经过分析,得到问题的原因:
            首页中的轮播图和详情中的轮播图,分歧点是 宽度是100% 还是自适应
    -->

</template>

<script>
    export default {
        data(){
            return {}
        },
        methods:{

        },
        props: ["lunbotuList", "isfull"]
    }
</script>

<style lang="less" scoped>
    .mint-swipe{
        height: 200px;
        .mint-swipe-item{
            text-align: center;
            img{
                height: 100%;
            }
        }
    }

    .full{
        width: 100%;
    }
</style>